<template>
    <div class="employee">
        <div class="add">
            <div class="title">员工列表</div>
            <el-button type="primary" @click="openDialog('add', {})">添加员工</el-button>
        </div>
        <div class="search">
            <el-input placeholder="请输入员工编号" v-model="searchMsg.id"></el-input>
            <el-input placeholder="请输入员工名字" v-model="searchMsg.name"></el-input>
            <el-select v-model="searchMsg.gender" placeholder="请选择员工性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>

            <div class="button">
                <el-button type="primary" @click="resetSearchMsg">重置搜索</el-button>
                <el-button type="primary" @click="getEmployeesList">搜索员工</el-button>
            </div>
        </div>

        <div class="content">
            <EmployeeTable :employess="employess" @refreshPage="getEmployeesList"
                @editEmployee="openDialog('edit', $event)">
            </EmployeeTable>
        </div>
        <div class="footer">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" size="default" background
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <AddEmployeeForm :addEmployeeDialogVisible="addEmployeeDialogVisible" @closeDialog="closeDialog('add')"
            @refreshPage="getEmployeesList">
        </AddEmployeeForm>
        <EditEmployeeForm :EditEmployeeDialogVisible="EditEmployeeDialogVisible" :employeeForm="employeeForm"
            @closeDialog="closeDialog('edit')" @refreshPage="getEmployeesList">
        </EditEmployeeForm>
    </div>
</template>
<script setup lang="ts">
import EmployeeTable from './component/EmployeeTable.vue';
import AddEmployeeForm from './component/AddEmployeeForm.vue';
import EditEmployeeForm from './component/EditEmoployeeForm.vue';
import { getData } from '../../api/api';

import { ref, onMounted } from 'vue';

onMounted(() => {
    getEmployeesList();
})

//搜索功能
let searchMsg = ref({
    id: '',
    name: '',
    gender: ''
})
const resetSearchMsg = () => {
    searchMsg.value = {
        id: '',
        name: '',
        gender: ''
    }
    getEmployeesList();
}
const employess = ref([])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(40)
const handleSizeChange = (val: number) => {
    pageSize.value = val
    getEmployeesList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getEmployeesList()
}
//获取员工列表
const getEmployeesList = async () => {
    const req = {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        searchMsg: { ...searchMsg.value }
    }

    const res = await getData("/employees", req);
    employess.value = res.data;
    total.value = res.total;

}

//添加员工
let addEmployeeDialogVisible = ref(false)
//编辑员工
let EditEmployeeDialogVisible = ref(false)
let employeeForm = ref({})
// 打开弹窗
const openDialog = (type: string, employee: any) => {
    if (type === 'add') {
        addEmployeeDialogVisible.value = true;
    } else {

        EditEmployeeDialogVisible.value = true;
        employeeForm.value = employee
    }
};

// 关闭弹窗
const closeDialog = (type: string) => {
    if (type === 'add') {
        addEmployeeDialogVisible.value = false;
    } else {
        EditEmployeeDialogVisible.value = false;
    }
};





</script>
<style scoped lang="scss">
.employee {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    padding: 20px;


    .add {
        width: 100%;
        height: 8%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f1f1f1;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .title {
            font-size: 18px;
            margin-left: 10px;
            font-weight: 700;
        }

    }

    .search {
        width: 100%;
        height: 10%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 1px solid #f1f1f1;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        position: relative;

        .el-input {
            width: 20%;
            margin-left: 10px;
        }

        .el-select {
            width: 20%;
            margin-left: 10px;
        }

        .button {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);

            .el-button {
                margin-left: 10px;
            }
        }

    }

    .content {
        width: 100%;
        margin-top: 10px;
    }

    .footer {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>